10 | Design Fundamentals (Part 1)

In this episode, Amy and James talk about 5 design principles: unity, contrast, balance, rhythm, and visual hierarchy and how they can be applied to an actual project, including their own.

SPONSORS

Vercel

Vercel combines the best developer experience with an obsessive focus on end-user performance. Their platform enables frontend teams to do their best work. It is the best place to deploy any frontend app. Start by deploying with zero configuration to their global edge network. Scale dynamically to millions of pages without breaking a sweat.

For more information, visit Vercel.com

ZEAL is hiring!

Zeal is a computer software agency that delivers “the world’s most zealous” and custom solutions. The company plans and develops web and mobile applications that consistently help clients draw in customers, foster engagement, scale technologies, and ensure delivery.

Zeal believes that a business is “only as strong as” its team and cares about culture, values, a transparent process, leveling up, giving back, and providing excellent equipment. The company has staffers distributed throughout the United States, and as it continues to grow, Coding Zeal looks for collaborative, object-oriented, and organized individuals to apply for open roles.

For more information visit codingzeal.com

KwesForms

KwesForms is the only complete developer-focused form service in the world. Build any type of form. Integrate it into any framework. No drag and drop, no unnecessary stylings. Set up advanced forms for clients on any platform. It works perfectly with any framework. Right out of the box.

For more information, visit kwes.io

Show Notes

0:00 Introduction

2:24 Art vs Design

4:34 Can anyone do design?

7:16 Principle #1: Unity

• UX Engineer
• Cues from branding elements: typography, color palette, typography
• consistent design, equals a cleaner design, equals cleaner code
• Look at the entire picture: What problem is your product trying to solve? Who are you solving this problem for? And what's the overall message that you're trying to resonate with your audience? And how should you break down that product into smaller pieces and organize it?

10:59 Sponsor: KwesForms

11:31 Principle #2: Contrast

• Accessibility
• Drive focus to specific areas of the design

16:04 Sponsor: ZEAL

16:43 Principle #3: Balance

• One element is perceived as heavier than a smaller element
• Ways to achieve this:
  • Color
  • Size
  • White Space
• Types of Balance: Symmetrical, Asymmetrical, Radial, and Mosaic

21:09 Principle #4: Rhythm

• You expect things to be laid a certain way
• If something is not in line, it creates contrast
• "Know the rules so that you can break them." -- Generally breaking one principle to drive another principle

23:17 Principle #5: Visual Hierarchy

• Lead or pull the user through

24:01 Assessing the call to action on our own personal sites

26:49 Sponsor: Vercel

27:39 Ways to Establish Visual Hierarchy

• Color
• Size
• Balance
• White Space

29:28 YouTube's red isn't accessible

31:30 Above the Fold

33:02 Grab Bag Questions

• Cam the Developer
• Matias

33:30 Grab Bag #1: What is a good resource for determining typography combinations?

• What Font? Bookmarklet

35:59 Grab Bag #2: Hod you find your watering holes and how do you determine what to teach?

40:07 James's Pick: Thermo Flask 2 Pack from Costco

40:56 James's Plug: James Q Quick on YouTube

41:24 Amy's Pick: Sipp App

42:10 Amy's Plug: Self Teach Me on YouTube